<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>电表管理</title>
<%@include file="../static/include/head.jsp"%>

<script
	src="<%=request.getContextPath()%>/static/assets/global/scripts/metronic.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/static/assets/admin/layout/scripts/layout.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/static/assets/admin/layout/scripts/quick-sidebar.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/static/assets/admin/layout/scripts/demo.js"
	type="text/javascript"></script>

<link
	href="<%=request.getContextPath()%>/static/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"
	rel="stylesheet" type="text/css" />
<script
	src="<%=request.getContextPath()%>/static/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/static/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"
	type="text/javascript"></script>
	
<link href="<%=request.getContextPath()%>/static/assets/global/plugins/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/static/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>

<script>
	jQuery(document).ready(function() {
		Metronic.init();
		Layout.init();
		QuickSidebar.init();
		Demo.init();
		$("#serchButton").click(function() {
			tableBillInit.fnDraw();
		});

		var tableBillInit = $("#table_ammeter").dataTable({
				"paging" : true, //翻页功能
				"lengthChange" : true, //改变每页显示数据数量
				"searching" : false, //过滤功能
				"ordering" : true, //排序功能
				"order" : [ [ 0, "desc" ] ],
				"processing" : false,
				"serverSide" : true, //服务器数据
				"lengthMenu" : [ 10, 15, 30, 50 ],
				"pageLength" : 10,
				"language" : {
				"processing" : "努力加载中...",
				"search" : "搜索&nbsp;:",
				"lengthMenu" : "一页显示 _MENU_ 条数据",
				"info" : "当前第 _START_ 条到第 _END_ 条记录，共 _TOTAL_ 条记录",
				"loadingRecords" : "正在努力的加载数据...",
				"infoEmpty" : "当前第 0 条到第 0 条记录，共 0 条记录",
				"emptyTable" : "没有找到您查询的数据信息"
			},
			"ajax" : {
				"url" : "ammeter/getAmmeterPage",
				"type" : "POST",
				"data" : function(data) {
					data.ammeterNo = $("#ammeterNo").val();
					data.stationNo = $("#stationNo").val();
				}
			},
			"columns" : [{
					"data" : "id"
				},{
					"data" : "stationNo"
				},{
					"data" : "ammeterNo"
				},{
					"data" : "beiLv"
				},{
					"data" : "status"
				},{
					"data" : "number"
				},{
					"data" : "description"
				},{
					"data" : "createrName"
				},{
					"data" : "position"
				},{
					"data" : "nature"
				},{
					"data" : "type"
				},{
					"width": "150px",
					"data" : "createTime",
					render: function ( data, type, row ) {
				        return new Date(data).toLocaleString().replace("/","年").replace("/","月").replace(" ","日 ").split(" ")[0];
				    }
				},{
					"width": "150px",
					"data" : "operateTime",
					render: function ( data, type, row ) {
				        return new Date(data).toLocaleString().replace("/","年").replace("/","月").replace(" ","日 ").split(" ")[0];
				    }
				},{
					"orderable": false,
					"data" : null,
					"defaultContent" : "<div style='width:120'><button type='button' onclick='lookAmmeterInit($(this))' class='btn blue btn-xs'>查看 <i class='fa fa-edit'></i></button><button type='button' onclick='deleteAmmeterInit($(this))' class='btn red btn-xs'>删除 <i class='fa fa-times'></i></button></div>"
				}]
		});
	});
	
	
	// 新增按钮初始化
	function addAmmeterInit() {
		clearInput();
		$("#edit_ammeter_btn").hide();
	    $("#submit_ammeter_btn").show();
	    $("#ammeterInfoTable input[type='text']").each(function(e){
	    	$(this).removeAttr("readonly");
	    	$(this).removeAttr("style");
	    	$(this).css("background-color","");
		 });
		$("#managerAmmeter_div").modal("show");
		$("#managerAmmeter_title").text("新增电表");
		$("#managerAmmeter_color").attr("class","portlet box green");
		<!-- 下拉框处理 -->
		$("#ammeter_isXinYuan_edit").removeAttr("readonly");
		$("#ammeter_beiLv_edit").removeAttr("readonly");
		$("#ammeter_type_edit").removeAttr("readonly");
		<!-- 下拉框处理结束 -->
		<!-- 日期控件处理 -->
		$("#ammeter_currentTime_edit").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: true,//今日按钮
            format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
        });		
		<!-- 日期控件处理结束 -->
		
    };
    
 	// 查看按钮初始化
	function lookAmmeterInit(item) {
		clearInput();
		$("#edit_ammeter_btn").show();
	    $("#submit_ammeter_btn").hide();
	    $("#ammeterInfoTable input[type='text']").each(function(e){
	    	$(this).attr("readonly","readonly");
	    	$(this).attr("style","border:0px");
	    	$(this).css("background-color",$(this).parents('td').css('background-color'));
		 });
		$("#managerAmmeter_title").text("查看电表详情");
		$("#managerAmmeter_color").attr("class","portlet box blue");
        var tableRow = item.parents('tr')[0];
        var idTh = $(tableRow).children().get(0);
        $.post("<%=request.getContextPath()%>/ammeter/getAmmeterById", 
    		{ 
    			id: $(idTh).text()
    		}, 
    		function(json){
    			for(var index in json.data){
    				var val = json.data[index];
    				if(typeof($("#ammeter_"+index+"_edit")) != "undefined"){
    					$("#ammeter_"+index+"_edit").val(json.data[index]);
    					<!-- 下拉框处理 -->
    					if(index=='isXinYuan'){
    						$("#ammeter_"+index+"_edit").val(json.data[index]);
    					}
    					if(index=='beiLv'){
    						$("#ammeter_"+index+"_edit").val(json.data[index]);
    					}	
    					if(index=='type'){
    						$("#ammeter_"+index+"_edit").val(json.data[index]);
    					}
    					<!-- 下拉框处理结束 -->
    					<!-- 处理日期字段 -->
    					if(index=='currentTime'){
    						var currentTime_str = new Date(json.data[index]).toLocaleString().replace("/","-").replace("/","-").replace(" "," ").split(" ")[0];
    						$("#ammeter_"+index+"_edit").val(currentTime_str);
    					} 
    				}
    			}
				$("#managerAmmeter_div").modal("show");
			},"json"
    	);
        <!-- 下拉框处理 --> 
		$("#ammeter_isXinYuan_edit").attr("readonly","readonly");
		$("#ammeter_beiLv_edit").attr("readonly","readonly");
		$("#ammeter_type_edit").attr("readonly","readonly");			
		<!-- 下拉框处理结束 -->
        <!-- 日期控件处理 -->
		$("#ammeter_currentTime_edit").datepicker('remove');
		<!-- 日期控件处理结束 -->
    };
	
	// 修改按钮初始化
	function editAmmeterInit() {
		$("#edit_ammeter_btn").hide();
	    $("#submit_ammeter_btn").show();
	    $("#ammeterInfoTable input[type='text']").each(function(e){
	    	$(this).removeAttr("readonly");
	    	$(this).removeAttr("style");
	    	$(this).css("background-color","");
		 });
		$("#managerAmmeter_title").text("修改电表资料");
		$("#managerAmmeter_color").attr("class","portlet box yellow");
		<!-- 下拉框处理 -->
		$("#ammeter_isXinYuan_edit").removeAttr("readonly");
		$("#ammeter_beiLv_edit").removeAttr("readonly");
		$("#ammeter_type_edit").removeAttr("readonly");
		<!-- 下拉框处理结束 -->
		<!-- 日期控件处理 -->
		$("#ammeter_currentTime_edit").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: true,//今日按钮
            format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
        });		
		<!-- 日期控件处理结束 -->
    };
    
 	// 删除按钮初始化
	function deleteAmmeterInit(item) {
		$("#ammeter_id_delete").val("");
        var tableRow = item.parents('tr')[0];
        var idTh = $(tableRow).children().get(0);
        var stationNameTh = $(tableRow).children().get(4);
        var stationNewNumberTh = $(tableRow).children().get(1);
        var id = $(idTh).text();
        $("#ammeter_id_delete").val(id);
        var message = "您确定要删除编号:"+id+",的电表吗?(本操作不可恢复)"
        $("#deleteAmmeter_p").text(message);
        $("#deleteAmmeter_div").modal("show");
    };
	
	
	//简单校验用户输入
	function submit_validation(){
		var obj = new Object();
		$("#ammeterInfoTable input[type='text']").each(function(e){
		    var billId = $(this).attr("id");
		    var idArray = billId.split('_');
		    obj[idArray[1]] = $(this).val();
		 });
		var id = $("#ammeter_id_edit").val();
		$("#ammeterInfoTable select").each(function(e){
		    var stationId = $(this).attr("id");
		    var idArray = stationId.split('_');
		    obj[idArray[1]] = $(this).val();
		 });
		if(id == ''){
			save_ammeter(obj)
		}else{
			update_ammeter(obj)
		}
		/* clearInput(); */
	}
	
	// 更新基站提交
	function update_ammeter(obj){
		$.ajax({
			type:"POST",
			async : false,
			url:"<%=request.getContextPath()%>/ammeter/checkAmmeter",
			data:obj,
			dataType :'json',
			timeout:"20000",
			success:function(data,textStatus){
				var msg = data.msg;
				var code = data.code;
				if(code == 0 && 'succ' == msg){
					$.post("<%=request.getContextPath()%>/ammeter/updateAmmeter",obj, 
					    	function(result){
					    		if(result == -1){
									alert("系统内部错误,请与管理员联系！");
									$("#managerAmmeter_div").modal("hide");
									$("#table_ammeter").dataTable().fnDraw();
								}else if(result == 0){
									alert("修改电表条目成功！");
									$("#managerAmmeter_div").modal("hide");
									$("#table_ammeter").dataTable().fnDraw();
								}
							}
					    );
				}	
				if(code == -1 && msg!= 'succ'){
					alert(msg);
					return;
				}
			},
			error : function(XMLResponse) {
				alert("提交超时请检查网络环境");
				$("#managerAmmeter_div").modal("hide");
				$("#table_ammeter").dataTable().fnDraw();
			}
		});
		
		
	}
	
	// 增加基站提交
	function save_ammeter(obj){
		$.ajax({
			type:"POST",
			async : false,
			url:"<%=request.getContextPath()%>/ammeter/checkAmmeter",
			data:obj,
			dataType :'json',
			timeout:"20000",
			success:function(data,textStatus){
				var msg = data.msg;
				var code = data.code;
				if(code == 0 && 'succ' == msg){
					$.ajax({
						type:"POST",
						url:"<%=request.getContextPath()%>/ammeter/add",
						data:obj,
						dataType :'json',
						timeout:"20000",
						success:function(data,textStatus){
							var msg = data.msg;
							var code = data.code;
							if(code == 0 && 'succ' == msg){
								alert("保存成功");
								$("#managerAmmeter_div").modal("hide");
								$("#table_ammeter").dataTable().fnDraw();
							}				
						},
						error : function(XMLResponse) {
							alert("提交超时请检查网络环境");
							$("#managerAmmeter_div").modal("hide");
							$("#table_ammeter").dataTable().fnDraw();
						}
					});
				}	
				if(code == -1 && msg!= 'succ'){
					alert(msg);
					return;
				}
			},
			error : function(XMLResponse) {
				alert("提交超时请检查网络环境");
				$("#managerAmmeter_div").modal("hide");
				$("#table_ammeter").dataTable().fnDraw();
			}
		});
	
	}
	
	// 删除基站提交
	function delete_ammeter(){
		$.post("<%=request.getContextPath()%>/ammeter/deleteAmmeterById", 
	    	{ 
				id:$("#ammeter_id_delete").val()
	    	}, 
	    	function(result){
	    		if(result == -1){
					alert("系统内部错误,请与管理员联系！");
					$("#deleteAmmeter_div").modal("hide");
					$("#ammeter_id_delete").val("");
					$("#table_ammeter").dataTable().fnDraw();
				}else if(result == 0){
					alert("删除电费条目成功！");
					$("#deleteAmmeter_div").modal("hide");
					$("#ammeter_id_delete").val("");
					$("#table_ammeter").dataTable().fnDraw();
				}
			}
	    );
	}
	
	function clearInput(){
		$("#ammeterInfoTable input[type='text']").each(function(e){
			$(this).val("");
		 });
	}
</script>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content">
	<%@include file="../static/include/header.jsp"%>
	<div class="clearfix"></div>
	<div class="page-container">
		<%@include file="../static/include/sidebar.jsp"%>
		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">
			<div class="page-content">
				<!-- BEGIN STYLE CUSTOMIZER -->
				<%@include file="../static/include/styles.jsp"%>
				<!-- END STYLE CUSTOMIZER -->
				<div class="row">
					<div class="col-md-12">
						<!-- BEGIN PAGE HEADER-->
						<h3 class="page-title">
							电表管理 <small>电表一览</small>
						</h3>
						<div class="page-bar">
							<ul class="page-breadcrumb">
								<li>
									<i class="fa fa-home"></i>
									<a href="index">主页</a>
									<i class="fa fa-angle-right"></i>
								</li>
								<li>
									<a href="ammeterManager">电表管理</a>
								</li>
							</ul>
						</div>
						<!-- END PAGE HEADER-->
						<!-- BEGIN ROW -->
						<div class="portlet box blue-madison">
							<div class="portlet-title">
								<div class="caption">
									<i class="fa fa-user"></i>电表一览
								</div>
								<div class="tools">
									<a href="javascript:;" class="collapse"></a>
								</div>
							</div>
							<div class="portlet-body">
								<div>
									<ul class="nav nav-tabs ">
										<li style="float: left">
											<button type="button" onclick="addAmmeterInit()" class="btn green">
												新增 <i class="fa fa-plus"></i>
											</button>
										</li>
										<li style="float: right; margin-left: 5px"">
											<button id="serchButton" type="button" class="btn green">搜索</button>
										</li>
										<li style="float: right">
											<input id="stationNo" type="text" class="form-control" placeholder="请输入站号">										
										</li>
										<li style="float: right">
											<input id="ammeterNo" type="text" class="form-control" placeholder="请输入电表编号">		
										</li>
									</ul>
									<div class="tab-pane fade active in" id="tab_1_1">
										<table id="table_ammeter" class="table table-striped table-hover table-bordered">
											<thead>
												<tr>
													<th>编号</th>
													<th>基站站号</th>
													<th>电表编号</th>
													<th>表倍率</th>
													<th>状态</th>
													<th>数量</th>
													<th>说明</th>
													<th>录入人姓名</th>
													<th>位置</th>
													<th>性质</th>
													<th>电表类型</th>
													<th>创建时间</th>
													<th>修改时间</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<!-- END ROW -->
					</div>
				</div>
			</div>
			<!-- END CONTENT -->
		</div>
	</div>
	<%@include file="../static/include/footer.jsp"%>
	<!-- modal BEGIN -->
	<div id="managerAmmeter_div" class="modal fade" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog">
			<div id="managerAmmeter_color" class="portlet box blue" style="width: 900px">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-user"></i>电表管理
					</div>
					<div id="managerAmmeter_title" class="tools">
					</div>
				</div>
				<div class="portlet-body form">
					<div class="form-body">
						<table style="margin: 3px" class="table table-striped table-hover table-bordered" id="ammeterInfoTable">
							<tr hidden="true">
								<td>编号</td>
								<td>
									<input class="col-md-12" id="ammeter_id_edit" type="text" readonly="readonly"></input>
								</td>							
							</tr>
							<tr>
								<td>基站站号</td>
								<td>
									<input class="col-md-12" id="ammeter_stationNo_edit" type="text"></input>
								</td>
								<td>电表编号</td>
								<td>
									<input class="col-md-12" id="ammeter_ammeterNo_edit" type="text"></input>
								</td>
							</tr>
							<tr>
								<td>表倍率</td>
								<td>
									<!-- <input class="col-md-12" id="ammeter_beiLv_edit" type="text"></input> -->
									<select class="layout-option form-control input-small" name="ammeter_beiLv_edit" id="ammeter_beiLv_edit" readonly="true">
										<option value="" selected="selected">请选择</option>
										<option value="1">直读（1倍）</option>
										<option value="10">10倍</option>
										<option value="15">15倍</option>
										<option value="20">20倍</option>
										<option value="30">30倍</option>
										<option value="50">50倍</option>
									</select>
								</td> 
								</td>
								<td>状态</td>
								<td>
									<input class="col-md-12" id="ammeter_status_edit" type="text"></input>
								</td>
								
							</tr>
							<tr>
								<td>数量</td>
								<td>
									<input class="col-md-12" id="ammeter_number_edit" type="text"></input>
								</td>
								<td>是否新源</td>
								<td>
									<select class="layout-option form-control input-small" name="ammeter_isXinYuan_edit" id="ammeter_isXinYuan_edit" readonly="true">
										<option value="" selected="selected">请选择</option>
										<option value="信源">信源</option>
										<option value="干放">干放</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>说明</td>
								<td colspan="3">
									<input class="col-md-12" id="ammeter_description_edit" type="text"></input>
								</td>
							</tr>						
							<tr>
								<td>录入人姓名</td>
								<td>
									<input class="col-md-12" id="ammeter_createrName_edit" type="text"></input>
								</td>
								<td>位置</td>
								<td>
									<input class="col-md-12" id="ammeter_position_edit" type="text"></input>
								</td>
							</tr>
							<tr>
								<td>性质</td>
								<td>
									<input class="col-md-12" id="ammeter_nature_edit" type="text"></input>
								</td>
								<td>电表类型</td>
								<td>
									<select class="layout-option form-control input-small" name="ammeter_type_edit" id="ammeter_type_edit" readonly="true">
										<option value="" selected="selected">请选择</option>  
										<option value="机房表">机房表</option>
										<option value="配电室表">配电室表</option>
										<option value="卡表">卡表</option>
										<option value="供电局"> 供电局</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>本次日期</td>
								<td><input id="ammeter_currentTime_edit" name="ammeter_currentTime_edit" class="col-md-12" type="text" /></td> 
								<td>本次度数</td>
								<td><input class="col-md-12" id="ammeter_currentDegrees_edit" name="ammeter_currentDegrees_edit"  type="text" /></td>
							</tr> 
						</table>
					</div>
					<div class="form-actions right">
						<button type="button" data-dismiss="modal" class="btn default">返回</button>
						<button id="edit_ammeter_btn" type="button" onclick="editAmmeterInit()" class="btn yellow" hidden="true">修改</button>
						<button id="submit_ammeter_btn" type="button" onclick="submit_validation()" class="btn green">提交</button>
					</div>		
				</div>
			</div>
		</div>
	</div>
	<!-- modal END -->
	
	<!-- modal BEGIN -->
	<div id="deleteAmmeter_div" class="modal fade" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog">
			<div class="portlet box red">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-user"></i>电费管理
					</div>
					<div class="tools">
						删除电费条目
					</div>
				</div>
				<div class="portlet-body form">
					<div class="form-body">
						<input class="col-md-10" id="ammeter_id_delete" type="text" readonly="readonly" hidden="true"></input>
						<p id="deleteAmmeter_p"></p>
					</div>
					<div class="form-actions right">
						<button type="button" data-dismiss="modal" class="btn default">返回</button>
						<button type="button" onclick="delete_ammeter()" class="btn red">删除</button>
					</div>		
				</div>
			</div>
		</div>
	</div>
	<!-- modal END -->
</body>
</html>
